<style scoped>
  .rule-title {
    font-size: 4vw;
    margin: 2vw 5vw;
    padding: 2vw;
    text-align: center;
    border-radius: 1vw;
  }
</style>
<template>
  <div v-if="mainData!=null">
    <div class="active-wrap" :style="{color: (mainData.page.font_color+'!important')}">
      <van-swipe class="banner-swipe" :autoplay="3000" indicator-color="white">
        <van-swipe-item v-for="item in mainData.content.banners" :key="item.img">
          <img class="banner-img" :src="baseImgUrl+item.img"/>
        </van-swipe-item>
      </van-swipe>
      <div class="rule-container">
        <div class="rule-title"
             :style="{background:mainData.page.btn_color,color:(mainData.page.btn_font_color+'!important')}">
          活动奖品
        </div>
        <div class="richtext" v-html="mainData.content.prize_content"></div>
      </div>
    </div>
  </div>
</template>
<script>
  import { getActive } from '@/api/active'

  export default {
    name: 'rule',
    date () {
      return {
        baseImgUrl: null,
        id: null,
        mainData: null,
      }
    },
    created () {
      this.id = sessionStorage.getItem('active_id')
      this.initData()
    },
    methods: {
      initData () {
        try {
          let mainData = this.GLOBAL.getMainData()
          if (mainData== null||!mainData ) {
            this.getData()
          } else {
            this.mainData = mainData
            this.baseImgUrl = this.mainData.siteConfig.baseImgUrl
          }
        } catch (e) {
          this.getData()
        }
      },
      getData () {
        let vm = this
        getActive(this.id).then(rep => {
          vm.mainData = rep.data.data
          vm.GLOBAL.setMainData(vm.mainData)
          vm.baseImgUrl = vm.mainData.siteConfig.baseImgUrl
        })
      },
    }

  }
</script>
